<template>
  <div class="product-card">
    <div class="product-card__header">
      <div class="product__info">
        <div class="product__title">{{ props.title }}</div>
        <div class="product__desc">{{ props.desc }}</div>
      </div>
    </div>
    <div class="product-card__body">
      <div class="product__info-progress">
        <span>进度</span>
        <span>{{ `${props.percent}%` }}</span>
      </div>
      <div class="product__progress">
        <el-progress
          :stroke-width="8"
          :show-text="false"
          :color="customColors"
          :percentage="props.percent"
        ></el-progress>
      </div>
    </div>
    <div class="product-card__footer">
      <div class="product__user">
        <div class="product-update">
          更新日期：
          <span>{{ props.updateDate }}</span>
        </div>
        <div class="product__user-avatar-wrap">
          <el-avatar class="product__user-avatar" size="small" v-for="(user, i) in avatars" :src="user" :key="i" />
          <el-avatar class="product__user-avatar" size="small" v-if="userAvatar.length > 2">{{
            `+${userAvatar.length - 2}`
          }}</el-avatar>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { computed, ref } from 'vue'

const props = defineProps({
  title: {
    type: String,
    default: ''
  },
  desc: {
    type: String,
    default: ''
  },
  percent: Number,
  updateDate: {
    type: String,
    default: ''
  },
  userAvatar: {
    type: Array,
    default: () => []
  }
})

const customColors = ref([
  { color: '#f56c6c', percentage: 20 },
  { color: '#e6a23c', percentage: 40 },
  { color: '#5cb87a', percentage: 60 },
  { color: '#1989fa', percentage: 80 },
  { color: '#6f7ad3', percentage: 100 }
])
const avatars = computed(() => {
  if (props.userAvatar.length > 2) {
    return props.userAvatar.filter((v, i) => i < 2)
  }
  return props.userAvatar
})
</script>

<style lang="scss" scoped>
.product-card {
  padding: 24px 20px 12px 16px;
  margin: 0 12px 12px 12px;
  border: 1px solid #ececf2;
  border-radius: 12px;
  height: 199px;
}

.product-card__header {
  width: 100%;
}

.product__title {
  font-size: 16px;
  line-height: 24px;
}

.product__desc {
  font-size: 12px;
  line-height: 21px;
  color: #8181a5;
}

.product-card__body {
  margin-top: 20px;
}

.product-card__footer {
  width: 100%;
  margin-top: 16px;
}

.product-update {
  font-size: 14px;
  line-height: 21px;

  span {
    font-size: 12px;
    color: #7c8087;
  }
}

.product__user {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.product__info-progress {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 14px;
  line-height: 21px;
  color: #8181a5;
}

.product__user-avatar-wrap {
  display: flex;
  align-items: center;
}

.product__user-avatar:not(:last-child) {
  margin-right: 5px;
}
</style>
